import React, {useState, useRef, useEffect} from 'react';
import {Modal, Form, Input, Button, message, Row, Col} from 'antd';
import {CloseOutlined, PlusOutlined} from "@ant-design/icons";

const AddStandard = (props) => {
  const {isModalVisible,handleSubmit,handleCancel,formData} = props;
  const [show,setShow] = useState(true);
  const [guige,setGuige] = useState([])
  const [inputState,setInputState] = useState(true)
  const [form] = Form.useForm();   /** 表单交互*/
  const { Search } = Input;

  const mySname = useRef()
  const mySvalue = useRef()


    useEffect(()=>{
      setGuige(formData?.content??[])
    },[])

   useEffect(()=>{
      if(inputState == false){
        setInputState(true)
      }
  },[inputState])

  const onSureClick =()=>{
    const nv = mySname.current.state.value;
    const sv = mySvalue.current.state.value;
    if ( nv === undefined && sv === undefined) return message.error('请添加规格名称或规格值')
    let data = {
      name:nv,
      value:[sv]
    }
    setGuige([...guige,data])
    setShow(true)

  }
  /**删除整体 */
  const del =(index)=>{
    let item = [...guige]
    item.splice(index,1)
    setGuige(item)
  }

  /** 模态框表单添加*/
  const add =(value,index)=>{
      let data = [...guige]
      let arr = data[index].value
      if (arr.includes(value)  || value === ''){
          return
        }else{
          data[index].value.push(value)
          setGuige(data)
        }
    }

  /**删除表单 */
  const dels =(sindex,index)=>{
    let data = [...guige]
    const items = data[index].value;
    items.splice(sindex,1)
    setGuige(data)

  }

  /** 模态框组件 */
  const guizeTmp = ()=>{
      return guige.map((item,index)=>{
          return (
            <Row key={index}>
              <Col span={20} offset={4}>
                <div style={{  alignItems: 'center'}}> <span style={{marginRight:' 5px'}}>{item.name}</span>
                  <CloseOutlined color={'#515a6e'} onClick={()=>{
                  del(index)
                  // 刪除規則 指定index
                }} />
                </div>
                <div style={{display: 'flex',alignItems: 'center',flexWrap: 'wrap'}}>
                  { item.value.map((value,sindex)=>{
                    return (
                      <div style={{display: 'flex',marginRight:'5px',border: '1px solid #dcdee2', padding:'5px 15px'}}>
                          {value}
                        <div key={sindex} style={{ marginLeft:'5px'}}> <CloseOutlined color={'#515a6e'}  onClick={()=>{
                          dels(sindex,index)
                        }} />
                        </div>
                      </div>
                    )
                  }
                    )

                  }
                  <div style={{display: 'flex', margin:'5px 0'}}>
                    {inputState?
                      <Search
                        placeholder="请输入属性名称"
                        enterButton="添加"
                        size="large"
                        onSearch={(value,event)=>{
                          add(value,index)
                          setInputState(false)
                        }}
                    />:null}
                  </div>
                  <div>
                  </div>
                </div>
              </Col>
            </Row>
          )
      })
  }


  return (
    <div>
      <Modal title="添加商品规格"
             visible={isModalVisible}
             onOk={()=>{
                  form.validateFields().then(values=>{
                    values.content = guige
                    handleSubmit(values)
                  })
             }}
             onCancel={() => {
               setShow(!show)
               handleCancel()
             }}
             width={800}
             // footer={null}
      >
        <Form
          name="basic"
          form={form}
          labelCol = {{span:4}}
          wrapperCol={{ span: 10 }}
          initialValues={formData}
          autoComplete="off"
        >

          <Form.Item
            name="id"
            hidden={true}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="规格模板名称:"
            name="title"
            rules={[{ required: true, message: '请输入规格名称' }]}
          >
            <Input />
          </Form.Item>
          {guizeTmp()}
        </Form>

        {show?
          <Form.Item wrapperCol={{ offset: 4, span: 20 }} >
            <Button type="primary" icon={<PlusOutlined />}  onClick={() => setShow(false)}>
              添加新规格
            </Button>
          </Form.Item>
          : <div>
            <Form.Item
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 10 }}
              label="规格名称:"
              name="standardName"
              rules={[{ message: 'Please input your username!' }]}
            >
              <Input ref={mySname}/>
            </Form.Item>
            <Form.Item
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 10 }}
              label="规格值:"
              name="standardValue"
              rules={[{ message: 'Please input your username!' }]}
            >
              <Input ref={mySvalue}/>
            </Form.Item>
            <div>
              <Button type="primary" onClick={onSureClick}>确定</Button>
              <Button style={{marginLeft:'20px'}} onClick={() => setShow(!show)}>取消</Button>
            </div>
          </div>}

      </Modal>
    </div>
  );
};

export default AddStandard;
